<template>
<div>
  <x-header id="head_top" :left-options="{showBack: false}">个人履历<a slot="right">{{userInfo.user_name}}</a></x-header>
  <div>
    <flexbox>
      <flexbox-item>
      <div>
      <tab v-model="tabIndex" :animate="true">
      <tab-item @on-item-click="onItemClick" active-class="active-6-1"><span class="iconfont icon-daiban"></span>个人情况</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-2"><span class="iconfont icon-quanbu"></span>近期课程</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-3"><span class="iconfont icon-yiban"></span>课程统计</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-4"><span class="iconfont icon-quanbu"></span>课时统计</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-2"><span class="iconfont icon-daiban"></span>比武奖项</tab-item>
  </tab>
  </div>
  </flexbox-item>
    </flexbox>
    </div>
  <div style="height:100vh;overflow: scroll;">
  <mt-loadmore :top-method="loadTop" topPullText="" :bottom-pull-text="bpt" :bottom-all-loaded="allLoaded" :bottom-method="loadBottom" ref="loadmore">
   <div>
    <group>
      <cell-form-preview class="default2" :list="filterTask"></cell-form-preview>
      <!-- <cell-form-preview :list="list"></cell-form-preview> -->
    </group>
  </div>
    </mt-loadmore>
       <div>{{noData}}</div>
    </div>
    <!-- <transition name="router-slid" mode="out-in">
            <router-view></router-view>
    </transition> -->
  </div>
</template>
<script>
import "assets/iconfont/iconfont.css";
import vue from "vue";
import { Loadmore } from "mint-ui";
vue.component(Loadmore.name, Loadmore);
import {
  getMyInfo,
  getClaStat,
  getHourStat,
  getClassList,
  getTechComp
} from "src/service/actual";
import {
  Icon,
  XHeader,
  Swipeout,
  SwipeoutItem,
  SwipeoutButton,
  Flexbox,
  FlexboxItem,
  Badge,
  TransferDom,
  Popup,
  Tab,
  TabItem,
  Popover,
  Group,
  Selector,
  Cell,
  CellBox,
  XSwitch,
  XButton,
  XInput,
  XTextarea,
  Rater,
  Calendar,
  CellFormPreview
} from "vux";
import { isNullOrUndefined } from "util";
export default {
  components: {
    Icon,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Flexbox,
    FlexboxItem,
    Badge,
    TransferDom,
    Popup,
    Tab,
    TabItem,
    Popover,
    Group,
    Selector,
    Cell,
    CellBox,
    XSwitch,
    XButton,
    XInput,
    XHeader,
    XTextarea,
    Rater,
    Calendar,
    CellFormPreview
  },
  data() {
    return {
       list: [],
      keyWord :"",
      bpt: "上拉加载更多",
      tabIndex: 0,
      // searcheNums: 0,
      page: 1,
      // nums: 10, //每页显示数量
      nums: 20, //每页显示数量
      allLoaded: false, //是否加载完所有内容
      show7: false,
      filterTask: [],
      popovervisble: false,
      perList: [],
      claList: [],
      claStaData: [],
      hourStaData: [],
      techCompData: [],
      activeName: "0",
      searchType: "",
      searchKey: "",
      searchDateF: "",
      searchDateE: "",
      searchPost: "",
      state: "",
      infocode: "",
      noData: "",
      userInfo: null,
      userCode: "",
      searchDept: "",
      actual: {
        id: undefined
      },
      pickerOptions2: {
      }
    };
  },
  computed: {},
  watch: {
  },
  mounted() {
    // console.log("mounted");
    this.dealSearch();
    // console.log("mounted");
  },
  created() {
    console.log("home-created");
    this.userInfo = this.$store.state.user;
    console.log("this.userInfo",this.userInfo);
     this.userCode =  this.userInfo.user_code;
     this.position = this.userInfo.user_position;
    //  console.log("this.position",this.position);
    //  console.log("created-this.userCode",this.userCode)
      this.getMyInfo();
       this.getClassList();
      this.getClaStat();
      this.getHourStat();
      this.getTechComp();
      // this.dealSearch();
      // this.getMyInfo(this.userCode);           //2019.8.14 更新
      //  this.getClassList(this.userCode);
      // this.getClaStat(this.userCode);
      // this.getHourStat(this.userCode);
  },
  methods: {
    // 个人情况
    getMyInfo() {
      getMyInfo(this.userCode).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.perList = response.data.items;
          console.log("this.perList",this.perList);
          var object;
          var index1;
          for(const x of this.perList){
              if(x.label=== "车站" && x.value===""){
                const index2 = this.perList.indexOf(x);
                this.perList.splice(index2,1);
              }
              if(x.label === "本单位报道日期"){         // && x.value !==""
                var myDate = new Date();
                // console.log(new Date().toLocaleDateString);   // ??系统当前日期，格式2019/8/13
                var date = x.value.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3");
                // console.log(date);                            //本单位报道日期，格式2019-03-01
                var date2 = new Date(date.replace(/-/,"/"));      //本单位报道日期，中国标准时间格式
                // console.log(date2);                           
                var minus = Math.abs(myDate.getTime() - date2.getTime());     //当前日期与本单位报道日期的差值，毫秒计
                var month = parseInt(minus/1000/3600/24/30.42)    //当前日期与本单位报道日期的差值，入司时长，毫秒计再近似到月份
                console.log("month",month);
                var y = parseInt(month/12);
                console.log("y",y);
                var m = month - y*12;
                  console.log("m",m);
                if(x.value===""){
                   object = {"label":"入司时长","value":""};
                }else{
                   object = {"label":"入司时长","value":y+"年"+m+"个月"};
                }
                // object = {"label":"入司时长","value":y+"年"+m+"个月"};
                index1 = this.perList.indexOf(x);
              }
          }
                this.perList.splice(index1+1,0,object); 
          this.dealSearch();
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    // 课程计信息查询
       getClaStat() {
      getClaStat({
        userCode:this.userCode,
        position:this.position
        }).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.claStaData = response.data.items;
          // this.list = response.data.items;
          console.log("this.claStaData",this.claStaData);
           this.dealSearch();
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    // 课时统计信息查询
       getHourStat() {
      getHourStat({
        userCode:this.userCode,
        position:this.position
      }).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.hourStaData = response.data.items;
            //  this.list = response.data.items;
          console.log("this.hourStaData",this.hourStaData);
           this.dealSearch();
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    getClassList() {
      getClassList(this.userCode).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.claList = response.data.items;
            // this.list = response.data.items;
          console.log("this.claList",this.claList);
          this.dealSearch();
          // console.log("this.list", this.list);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
      getTechComp() {
      getTechComp(this.userCode).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.techCompData = response.data.items;
          console.log("this.techCompData",this.techCompData);
           this.dealSearch();
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    // 所有记录
   
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      this.page++;
      this.dealSearch();
      this.$refs.loadmore.onBottomLoaded();
    },
    
    onItemClick(index) {
      this.page = 1;
      this.dealSearch();
    },
    dealSearch() {
      // this.searcheNums = 0;
      if (this.tabIndex === 0) {
        // this.getMyInfo(this.userCode);
        this.filterTask = this.perList;
      }else if(this.tabIndex === 1){
        // this.getClassList(this.userCode);
        this.filterTask = this.claList;
      }else if (this.tabIndex === 2) {
        this.filterTask = this.claStaData;
        // this.getClaStat(this.userCode);
      } else if (this.tabIndex === 3) {
        this.filterTask = this.hourStaData;
          // this.getHourStat(this.userCode);
      }else if(this.tabIndex === 4){
        this.filterTask = this.techCompData;
      }

      if (this.filterTask.length < this.page * this.nums + 1) {
        this.allLoaded = true;
        this.noData = "别拉了,没有数据了!";
      } else {
        this.allLoaded = false;
        this.noData = "";
      }
      this.filterTask = this.filterTask.slice(0, this.nums * this.page);
      // console.log("this.tabIndex",this.tabIndex)
      // console.log("dealSearch_over");
    },
    showSearch() {
      this.show7 = true;
      // console.log("showSearch");
    }
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";
#head_top {
  background-color: #1e90ff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
  z-index: 1;
}
.div_head {
  position: fixed;
  background-color: #fff;
  left: 0;
  top: 3rem;
  width: 100%;
  z-index: 1;
}
.box {
  padding: 15px;
}
.icon-daiban {
  font-size: 25px;
}
.icon-yiban {
  font-size: 25px;
}
.icon-quanbu {
  font-size: 25px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.active-6-4 {
  color: rgb(95, 74, 77) !important;
  border-color: rgb(95, 74, 77) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.task_list_ul {
  .task_list_li {
    background-color: #fff;
    display: flex;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.6rem 0;
    text-align: left;
    .task_list_title {
      width: 80%;
      text-align: left;
    }
    .task_list_approve {
      width: 20%;
      text-align: right;
    }
  }
}
.task_list0 {
  padding: 12px;
  text-align: left;
  color: rgb(38, 148, 75);
  //   color: rgb(252, 55, 140);
}
.task_list1 {
  padding: 12px;
  text-align: left;

  //   color: rgb(134, 136, 138);
}
.input-class {
  width: 300px;
  height: 40px;
}
.default2 {
  // background-color: #aa8b8b;
  border-width: 3mm
}
</style>